<template>
	<gui-page :customHeader="true" isHeaderSized headerClass="gui-bg-primary">
		<template v-slot:gHeader>
			<view style="height:44px;" class="gui-flex gui-nowrap gui-rows gui-align-items-center">
				<!-- 使用组件实现返回按钮及返回首页按钮 -->
				<gui-header-leading @goHome="goHome" :home="false"
					:backButtonClass="['gui-color-white']"></gui-header-leading>
				<!-- 导航文本此处也可以是其他自定义内容 -->
				<text
					class="gui-h5 gui-blod gui-flex1 gui-text-left gui-color-white gui-ellipsis gui-primary-text">新进客户</text>
				<!-- 此处加一个右侧展位元素与左侧同宽，实现标题居中 -->
				<!-- 实际宽度请根据自己情况设置 -->
				<view style="width:120rpx;"></view>
				<!-- 如果右侧有其他内容可以利用条件编译和定位来实现-->
			</view>
		</template>
		<!-- 请开始您的开发 ~ -->
		<template v-slot:gBody>

			<view class="gui-padding">

				<view class="page_item gui-bg-white gui-border-radius gui-padding">
					<view class="bt gui-bold gui-h4">
						基础信息
					</view>
					<view class="form-box">
						<form @submit="submit">

							<view style="height:28rpx;"></view>
							<view class="gui-bg-white gui-dark-bg-level-3 gui-padding-x">
								<view class="gui-form-item gui-border-b">
									<text class="gui-form-label gui-secondary-text">用户姓名</text>
									<view class="gui-form-body">
										<input type="text" class="gui-form-input" v-model="formData.name1" name="name1"
											placeholder="请输入姓名" />
									</view>
								</view>

								<view class="gui-form-item gui-border-b">
									<text class="gui-form-label gui-secondary-text">身份证号码</text>
									<view class="gui-form-body">
										<input type="text" class="gui-form-input" v-model="formData.name1" name="name1"
											placeholder="请输入身份证号码" />
									</view>
								</view>

								<view class="gui-form-item ">
									<text class="gui-form-label gui-secondary-text">申请金额</text>
									<view class="gui-form-body">
										<input type="text" class="gui-form-input" v-model="formData.name1" name="name1"
											placeholder="请输入申请金额" />
									</view>
								</view>




							</view>




						</form>
					</view>

				</view>



				<view class="page_item gui-bg-white gui-border-radius gui-padding gui-margin-top">
					<view class="bt gui-bold gui-h4">
						产品信息
					</view>
					<view class="form-box">
						<form @submit="submit">

							<view style="height:28rpx;"></view>
							<view class="gui-bg-white gui-dark-bg-level-3 gui-padding-x">
								<view class="gui-form-item gui-border-b">
									<text class="gui-form-label gui-secondary-text">用户姓名</text>
									<view class="gui-form-body">
										<input type="text" class="gui-form-input" v-model="formData.name1" name="name1"
											placeholder="请输入姓名" />
									</view>
								</view>

								<view class="gui-form-item gui-border-b">
									<text class="gui-form-label gui-secondary-text">身份证号码</text>
									<view class="gui-form-body">
										<input type="text" class="gui-form-input" v-model="formData.name1" name="name1"
											placeholder="请输入身份证号码" />
									</view>
								</view>

								<view class="gui-form-item gui-border-b">
									<text class="gui-form-label gui-secondary-text">申请金额</text>
									<view class="gui-form-body">
										<input type="text" class="gui-form-input" v-model="formData.name1" name="name1"
											placeholder="请输入申请金额" />
									</view>
								</view>




							</view>

							<view class="gui-bg-white gui-dark-bg-level-3 gui-padding-x">
								<view style="padding-top:20rpx;">
									<text class="gui-text-small gui-color-gray">填写描述</text>
								</view>
								<view style="padding:15rpx 0;">
									<textarea v-model="formData.name5" name="name5" placeholder="说点什么..."
										class="gui-textarea gui-bg-gray gui-padding-small gui-dark-bg-level-1"
										style="width:690rpx;"></textarea>
								</view>

							</view>
							<view
								class="gui-margin-top gui-flex gui-row gui-nowrap gui-justify-content-end gui-padding-x">
								<button type="default" class="gui-button gui-bg-primary gui-noborder"
									style="width:200rpx;" formType="submit">
									<text class="gui-icons gui-color-white gui-button-text">&#xe642; 提交</text>
								</button>
							</view>
							<view style="height:60rpx;"></view>
						</form>
					</view>

				</view>


			</view>





		</template>
	</gui-page>
</template>
<script>
	export default {
		data() {
			return {

				// 表单数据存储
				formData: {
					name1: '',
					name2: '',
					name3: '',
					name4: '',
				},
				// 密码可视 类型切换
				isPwd: true,
				// picker 
				gender: ['请选择性别', '男', '女'],
				genderIndex: 0
			}
		},
		onLoad: function() {

		},
		methods: {
			init() {

			},
			goYusheng() {
				this.$refs.yusheng.open();
			}

		}
	}
</script>

<style lang="scss" scoped>
	@import "../../custom/custom.scss";
	.page_item {
		.bt {
			position: relative;
			padding-left: 20rpx;
			&::after {
				position: absolute;
				content: "";
				width: 10rpx;
				height: 38rpx;
				background-color: #0454f9;
				top: 8rpx;
				left: 0rpx;
				border-radius: 5rpx;
			}
		}
	}
</style>